﻿@namespace Bit.BlazorUI
@inherits BitTextInputBase<string?>

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()">
    <div class="bit-srb-cnt @Classes?.InputContainer" style="@Styles?.InputContainer">
        @if (HideIcon is false)
        {
            <div aria-hidden="true"
                 style="@Styles?.IconWrapper" 
                 class="bit-srb-iwp @Classes?.IconWrapper">
                <i aria-hidden="true" 
                   style="@Styles?.Icon" 
                   class="bit-icon bit-icon--@IconName @Classes?.Icon" />
            </div>
        }

        @if (PrefixTemplate is not null)
        {
            @PrefixTemplate
        }
        else if (Prefix.HasValue())
        {
            <div style="@Styles?.PrefixContainer" 
                 class="bit-srb-pre @Classes?.PrefixContainer">
                <span style="@Styles?.Prefix" 
                      class="@Classes?.Prefix">
                    @Prefix
                </span>
            </div>
        }

        <input @ref="InputElement" @attributes="InputHtmlAttributes"
               @onkeydown="@HandleOnKeyDown"
               @onfocusin="HandleInputFocusIn"
               @onfocusout="HandleInputFocusOut"
               @oninput="@HandleOnStringValueInputAsync"
               @onchange="@HandleOnStringValueChangeAsync"
               type="text"
               name="@Name"
               id="@_inputId"
               role="searchbox"
               readonly="@ReadOnly"
               value="@CurrentValue"
               style="@Styles?.Input"
               autofocus="@AutoFocus"
               inputmode="@_inputMode"
               aria-label="@AriaLabel"
               placeholder="@Placeholder"
               autocomplete="@AutoComplete"
               disabled="@(IsEnabled is false)"
               class="bit-srb-inp @Classes?.Input" />

        @if (SuffixTemplate is not null)
        {
            @SuffixTemplate
        }
        else if (Suffix.HasValue())
        {
            <div style="@Styles?.SuffixContainer" class="bit-srb-suf @Classes?.SuffixContainer">
                <span style="@Styles?.Suffix" class="@Classes?.Suffix">
                    @Suffix
                </span>
            </div>
        }

        @if (HideClearButton is false && CurrentValue.HasValue())
        {
            <button @onclick="HandleOnClearButtonClick"
                    type="button"
                    aria-hidden="true"
                    aria-label="Clear text"
                    style="@Styles?.ClearButton"
                    disabled="@(CurrentValue.HasNoValue())"
                    class="bit-srb-cbt @Classes?.ClearButton">
                @if (ClearButtonTemplate is not null)
                {
                    @ClearButtonTemplate
                }
                else
                {
                    <i style="@Styles?.ClearButtonIcon" class="bit-icon bit-icon--Cancel @Classes?.ClearButtonIcon" aria-hidden="true" />
                }
            </button>
        }
    </div>

    @if (ShowSearchButton)
    {
        <button @onclick="HandleOnSearchButtonClick"
                type="button"
                aria-hidden="true"
                aria-label="Search text"
                style="@Styles?.SearchButton"
                class="bit-srb-sbn @Classes?.SearchButton">
            @if (SearchButtonTemplate is not null)
            {
                @SearchButtonTemplate
            }
            else
            {
                <i style="@Styles?.SearchButtonIcon" class="bit-icon bit-icon--@SearchButtonIconName @Classes?.SearchButtonIcon" aria-hidden="true" />
            }
        </button>
    }

    @if ((SuggestItems?.Any() ?? false) || SuggestItemsProvider is not null)
    {
        if (Modeless is false)
        {
            <div @onclick="CloseCallout"
                 class="bit-srb-ovl @Classes?.Overlay"
                 style="display:@(_isOpen ? "block" : "none");@Styles?.Overlay" />
        }

        <div id="@_calloutId"
             tabindex="0"
             role="listbox"
             style="@Styles?.Callout"
             class="bit-srb-cal @Classes?.Callout">

            <div id="@_scrollContainerId"
                 style="@Styles?.ScrollContainer"
                 class="bit-srb-scn @Classes?.ScrollContainer">
                @foreach (var text in _viewSuggestedItems)
                {
                    var isSelected = GetIsSelected(text);
                    <div style="@Styles?.SuggestItemWrapper" class="@Classes?.SuggestItemWrapper">
                        <button @onclick="() => HandleOnSuggestedItemClick(text)"
                                tabindex="0"
                                type="button"
                                role="option"
                                title="@text"
                                aria-label="@text"
                                aria-setsize="@GetTotalItems()"
                                style="@Styles?.SuggestItemButton"
                                aria-posinset="@GetItemPosInSet(text)"
                                aria-selected="@(isSelected ? "true" : "false")"
                                class="bit-srb-itm@(isSelected ? " bit-srb-sel" : "") @Classes?.SuggestItemButton">
                            @if (SuggestItemTemplate is not null)
                            {
                                @SuggestItemTemplate(text)
                            }
                            else
                            {
                                <span style="@Styles?.SuggestItemText"
                                      class="@Classes?.SuggestItemText">
                                    @text
                                </span>
                            }
                        </button>
                    </div>
                }
            </div>

        </div>
    }
</div>